<template>
  <div class="demo">
    <h2>{{ msg }}</h2>

    <!-- 通过父组件给子组件传递函数类型的props实现，子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定一个自定义事件实现，子给父传递数据 (第一种，使用@或v-on)-->
    <!-- <Student v-on:jian="getStudentName" /> -->
    <!-- 简写形式 -->
    <!-- <Student @jian="getStudentName" /> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现，子给父传递数据 (第二种，使用ref)-->
    <!-- <Student ref="student"/> -->

    <!-- 给组件绑定原生事件 .native -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";

export default {
  data() {
    return {
      msg: "hello,jian!",
    };
  },
  components: {
    Student,
    School,
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名称：", name);
    },
    // 除了第一个参数，其他的存放在params数组中
    // getStudentName(name, ...params) {
    //   console.log("App收到了学生姓名：", name, params);
    // },
    demo() {
      console.log("demo被调用了");
    },
    show() {
      alert(123);
    },
  },
  mounted() {
    // 第一种
    // this.$refs.student.$on("jian", this.getStudentName);
    // 第二种
    this.$refs.student.$on("jian", (name, ...params) => {
      console.log("App收到了学生姓名：", name, params);
    });

    this.$refs.student.$on("m1", this.demo);

    //  只执行一次
    // this.$refs.student.$once("jian", this.getStudentName);
  },
};
</script>

<style>
.demo {
  background-color: greenyellow;
}
</style>
